<template>
  <div class = "login">
    <div class = "wrapper" style="padding: 0px 20px">
      <Title></Title>
      <div class="register_wrapper">
        <router-link to="/register">
          <div class="register_inner el-icon-s-custom" style="padding-top: 10px;font-size: 50px;">
          </div>
        </router-link>
      </div>
      <div form_wrapper style = "
      padding-top: 20px;max-width:500px;
      border-radius: 0 0 10px 10px;
      margin: 30px auto; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3)">
        <el-form style="">
          <el-input placeholder="请输入账号" v-model="username" clearable class = "login_vue">
          </el-input>
          <el-input placeholder="请输入密码" v-model="password" show-password class = 'login_vue' ></el-input>
          <div class = "btn_wrapper" style="
          margin-top: 20px;
          display: flex;flex-direction: column;align-content: flex-end">
            <el-checkbox v-model="checked" label="自动登录" border style="
            box-shadow: 0px 0px 10px 0 rgba(0, 0, 0, 0.1);
            border-radius: 10px 10px 0 0;"></el-checkbox>
            <el-button
              @click="login"
              type="primary" style="border-radius: 0 0 10px 10px;font-size: 18px;font-weight: bold">登   录</el-button>
          </div>
        </el-form>
      </div>

    </div>
  </div>
</template>

<script>
  import {postRequest} from '../../utils/api'
  import Title from '../smallcom/Title'
  import {strsutils} from "../../utils/strutils";
  let baseurl = strsutils.baseurl
    export default {
      name: "login",
      data(){
        return{
          msg: '',
          username: '李白',
          password: '111',
          checked: true
        }
      },
      methods: {
        login(){
          let _this = this
          let userinfo = {
            username: _this.username,
            password: _this.password
          }
          // postRequest("/api/translate?&doctype=json&type=AUTO&i=love", JSON.stringify(userinfo)).then(function (res) {
          postRequest(baseurl+"/login", userinfo).then(function (res) {
            console.debug(JSON.stringify(res))
            if(res.data === 0){
              _this.$message.error('登录失败：账号或密码错误');
            }else {
              console.debug(res)
              _this.$store.userid = res.data
              window.localStorage.setItem('userid',res.data)
              // _this.$message({
              //   message: "登录成功id:"+res.data,
              //   type: 'success'
              // })
              _this.$router.replace('/home')
            }

          }).catch(function (err) {
            console.debug(err)
            _this.$message.error('服务器出错了');
          })
        }
      },
      components: {
        Title
      }
    }
</script>

<style >
  .login_vue .el-input__inner {
    border-radius:100px;
  }
</style>

<style scoped>
  .login_vue{ margin: 10px auto;width: 80%;}

</style>
